<template>
  <el-input
    class="gb-input-number"
    v-bind="$attrs"

    v-model="syncedValue" clearable
    @input="val => syncedValue = val.replace(/\D/g, '')"
    @blur="handleBlur"
    @change="$emit('transfer-change')"
  >
    <el-button v-if="unit" slot="append">{{ unit }}</el-button>
  </el-input>
</template>

<script>
/**GbInputNumber组件说明
 * 限制只能输入数字，v-model绑定值最终转化为 数字类型
*/
export default {
  name: 'GbInputNumber',
  inheritAttrs: false,

  props: {
    // 控件值
    value: {},
    // 单位
    unit: {
      type: String
    }
  },
  computed: {
    syncedValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  },
  methods: {
    /**字符串转数字*/
    handleBlur() {
      if(!this.syncedValue) {
        this.syncedValue = undefined
      }else {
        this.syncedValue = Number.parseFloat(this.syncedValue);
      }

      // 特殊情况下会使用到
      this.$emit('transfer-blur');
    }
  }
}
</script>

<style>

</style>